<template>
  <li
    :aria-expanded="isOpen"
    aria-haspopup="true"
    :class="[
      `${prefixCls}-submenu`,
      `${prefixCls}-submenu-${mode}`,
      disabled ? `${prefixCls}-submenu-disabled` : ``,
      isOpen ? `${prefixCls}-submenu-open` : ``
    ]"
    @mouseenter="handleMouseEnter"
    @mouseleave="handleMouseLeave"
  >
    <div
      v-if="$slots.title || title"
      :class="`${prefixCls}-submenu-title`"
      :style="style"
      @click="handleClick"
    >
      <slot name="title">{{ title }}</slot>
      <mds-icon type="down" :class="`${prefixCls}-submenu-title-after`" />
    </div>
    <mds-transition v-if="$slots.default" :type="animition.type" :motion="animition.motion">
      <ul
        v-show="isOpen"
        :class="[
          prefixCls,
          `${prefixCls}-sub`,
          `${prefixCls}-${subMode}`
        ]"
      >
        <slot />
      </ul>
    </mds-transition>
  </li>
</template>

<script>
import { switchcase } from './_util/switchcase'

export default {
  name: 'MdsMenuSubmenuLocal',
  inject: ['menuRoot'],
  props: {
    disabled: {
      type: Boolean,
      default: false
    },
    index: [String, Number],
    title: String
  },
  _parent: null,
  data() {
    return {
      timer: null,
      prefixCls: this.menuRoot.prefixCls
    }
  },
  computed: {
    animition() {
      return switchcase({
        'horizontal': {
          type: 'slide',
          motion: 'up'
        },
        'vertical': {
          type: 'zoom',
          motion: 'big'
        },
        'inline': {
          type: 'collapse'
        }
      })('')(this.mode)
    },
    path() {
      return this.$options._parent.path.slice().concat(this.index)
    },
    style() {
      const res = {}
      if (this.mode === 'inline' && this.level > 0) {
        res['padding-left'] = this.level * this.inlineIndent + 'px'
      }
      return res
    },
    // From parent
    mode() {
      if (this.inlineCollapsed) {
        return 'vertical'
      } else {
        return this.$options._parent.mode
      }
    },
    inlineCollapsed() {
      return this.$options._parent.inlineCollapsed
    },
    multiple() {
      return this.$options._parent.multiple
    },
    subMode() {
      if (this.inlineCollapsed) {
        return 'vertical'
      } else {
        return this.$options._parent.mode === 'horizontal' ? 'vertical' : this.$options._parent.mode
      }
    },
    level() {
      return this.$options._parent.level + 1
    },
    inlineIndent() {
      return this.$options._parent.inlineIndent
    },
    isOpen() {
      return this.$options._parent.open.indexOf(this.index) > -1
    },
    open() {
      return this.$options._parent.open
    },
    selected() {
      return this.$options._parent.selected
    },
    handleClickItem() {
      return this.$options._parent.handleClickItem
    },
    handleSelect() {
      return this.$options._parent.handleSelect
    },
    handleDeSelect() {
      return this.$options._parent.handleDeSelect
    },
    handleOpenChange() {
      return this.$options._parent.handleOpenChange
    }
  },
  created() {
    this.$options._parent = this.$parent
    while (!this.$options._parent.mode) {
      this.$options._parent = this.$options._parent.$parent
    }
  },
  methods: {
    handleClick() {
      if (this.mode !== 'inline') return
      this.$options._parent.handleOpenChange(this.index, !this.isOpen)
    },
    handleMouseEnter(e) {
      if (this.mode === 'inline') return
      this.timer && clearTimeout(this.timer)
      this.$options._parent.handleOpenChange(this.index, true)
    },
    handleMouseLeave(e) {
      if (this.mode === 'inline') return
      this.timer = setTimeout(() => {
        this.$options._parent.handleOpenChange(this.index, false)
      }, 100)
    }
  }
}
</script>
